import { Component } from "react";
import PropTypes from "prop-types";

function Colors({list,a}) {
  return(
    <div>
      <ul>
        {
          list.map((item,index)=>(
            <li key={index} style={{color:item}}>{item}</li>
          ))
        }
      </ul>
      {a}
    </div>
  )
}
// 设置默认值
Colors.defaultProps={
  a:100
}

/**
 * 1. 安装属性校验的包：`yarn add prop-types`
 * 2. 导入 `prop-types` 包 
 * 3. 使用`组件名.propTypes = {}` 来给组件 List 的props添加校验规则
 * 4. 为组件添加 `propTypes` 属性，并通过 `PropTypes` 对象来指定属性的类型
 */

/**
 * 1. 常见类型：array、bool、func、number、object、string
 * 2. React元素类型：element
 * 3. 必填项：isRequired
 * 4. 特定结构的对象：shape({})
 */
Colors.propTypes={
  // 父传子属性名：数据类型
  list:PropTypes.array,
  a:PropTypes.number.isRequired,
  b:PropTypes.element,
  // PropTypes.shape()针对对象类型，更加精细化的校验
  obj:PropTypes.shape({
    a:PropTypes.number,
    b:PropTypes.string
  })
}

class Children extends Component{
  // 定义静态属性
  static defaultProps={
    a:666
  }
  static propTypes={
    a:PropTypes.number,
    b:PropTypes.string.isRequired
  }
  render(){
    return(
      <div>
        <h3>类组件</h3>
        <ul>
          <li>{this.props.a}</li>
          <li>{this.props.b}</li>
        </ul>
      </div>
    )
  }
}
// Children.defaultProps={
//   a:666
// }
// Children.propTypes={
//   a:PropTypes.number,
//   b:PropTypes.string.isRequired
// }
class App extends Component{
  state={
    list:['pink','skyblue','green'],
    // list:'pink'
    obj:{
      a:4,
      b:'abc'
    }
  }
  render(){
    return(
      <div>
        <h1>props校验</h1>
        <hr />
        <Colors 
        list={this.state.list} 
        obj={this.state.obj} 
      
        b={<p>123</p>}
        ></Colors>
        <hr />
        <Children b='111'></Children>
      </div>
    )
  }
}

export default App